import React, {useState, useCallback,useEffect} from 'react'

const set = new Set()
function StateFunction() {
  const [num, setNum] = useState(1)
  const [age, setAge] = useState(18)

  // 在使用方法上，useCallback 与 useMemo 相同
  // useMemo返回的是一个值，useCallback返回的是一个函数
  // 不同点，useMemo缓存的是一个值，useCallback缓存的是一个函数
  const getDoubleNum = useCallback(() => {
    console.log("获取双倍num")
    return 2 * num
  }, [num])
  set.add(getDoubleNum)
  console.log(set.size)
  // function getDoubleNum() {
  //   console.log("获取双倍num")
  //   return 2 * num
  // }

  // const getDoubleNum = useMemo(() => {
  //   console.log('获取双倍的num')
  //   return 2 * num
  // }, [num])
  return <div onClick={()=>{setNum(num=>num+1)}}>
    这是一个MemoFunction函数组件 - {getDoubleNum()}, 
    age的值为{age}
    <Child callback={getDoubleNum}></Child>
  </div>
}

function Child(props) {
  console.log('props.callback')
  console.log(props.callback)
  useEffect(()=>{
    console.log("callback更新了")
  },[props.callback])
  return <div>Child</div>
}

export default StateFunction